<template>
  <div class="form-engine-test">
    <div style="display: flex; align-items: center; justify-content: center; padding: 10px;">
      <a-button icon="cloud-download" type="primary" @click="loadFormDefinition">加载单据定义</a-button>
      <span style="margin-left: 10px">
        视图:
        <a-select v-model="viewId" style="width: 200px;">
          <a-select-option v-for="item in formDefinition && formDefinition.views || []"
                           :value="item.id">
            {{ item.viewName }}
          </a-select-option>
        </a-select>
      </span>
      <span style="margin-left: 10px">
      权限:
      <a-select v-model="actionId" style="width: 200px;" @change="actionChange">
        <a-select-option v-for="item in formDefinition && formDefinition.actions || []"
                         :value="item.id">
          {{ item.actionName }}
        </a-select-option>
      </a-select>
    </span>
    </div>


    <div class="form-engine-wrapper">
      <div>
        <FormEngine v-model="formModel" :view="viewId" ref="formEngine"
                    :action="actionId" :formDefinition="formDefinition"/>
      </div>
    </div>

  </div>
</template>
<script>
import FormEngine from '@/components/hhd/design/FormEngine/FormEngine.vue';
import {getAction} from '@/api/manage';
import {readFormDefinitionVo} from '@/components/hhd/design/FormDesigner/types';

export default {
  name: 'FormEngineTest',
  components: {FormEngine},
  data() {
    return {
      formDefinition: undefined,
      formModel: undefined,
      viewId: undefined,
      actionId: undefined,
    };
  },
  methods: {
    loadFormDefinition() {
      getAction('/form/queryById', {id: '17950eceaa704dfd9491beb81f93670d'}).then(data => {
        let result = data.result;
        this.setData(result);
      });
    },
    actionChange() {
      this.$nextTick(() => {
        this.$refs.formEngine.resetAction();
      });
    },
    setData(formDefinition) {
      if (!formDefinition) {
        this.formDefinition = undefined;
        this.formModel = undefined;
        this.viewId = undefined;
        this.actionId = undefined;
        return;
      }
      formDefinition = readFormDefinitionVo(formDefinition);
      this.viewId = formDefinition.views[0].id;
      this.actionId = formDefinition.actions[0].id;
      this.formDefinition = formDefinition;
      this.formModel = undefined;
    },
  },
};
</script>
<style>
.form-engine-test {
  width: 100vw;
  height: 100vh;
}
</style>